<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./products.js"></script>
    <script>
      // 全局变量products
      console.log(products)
      // 要求：先到控制台观察数据的属性和解构，然后按要求筛选或转换数据
      // 商品名字段name
      // 0. 取itemType是'ART' 并且 price.regularPrice<200
      console.log(
        products.filter(
          (p) => p.itemType === 'ART' && p.price.regularPrice < 200
        )
      )

      // 1.取出所有类型（productType）为 “背包”且颜色（designText）不为“蓝色”的商品

      // 2.取出所有类型（productType）含有“袋”字，并且是新品（new=true）的商品名字的数组
      // filter -> indexOf

      // 3.选出价格最贵（价格的属性price.regularPrice）的十个商品(从高到低)，并转换为html字符串，html的格式为
      console.log([...products].sort(
        ({ price: { regularPrice: a } },
         { price: { regularPrice: b } }) => b - a
      ).slice(0, 10))
      /*
  <ul>
    <li><img src='图片属性（image)' />商品名：n元</li>
    <li><img src='图片属性（image)' />商品名：n元</li>
    <li><img src='图片属性（image)' />商品名：n元</li>
    <li><img src='图片属性（image)' />商品名：n元</li>
  </ul>
*/
    </script>
  </body>
</html>
